<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="content">
			<div id="formlist">
				<div class="inner">
					<p>你喜欢哪个城市</p>
					<ul id="city">
						<li id="bj">北京</li>
						<li>上海</li>
						<li>广州</li>
						<li>杭州</li>
					</ul>
					<br />
					<br />
				</div>
			</div>
			
			<div id="btnlist">
				<div><button id="btn01">创建一个"深圳"节点，添加到#city下</button></div>
				<div><button id="btn02">将"深圳"节点添加到#bj前面</button></div>
				<div><button id="btn03">使用"深圳"节点替换#bj节点</button></div>
				<div><button id="btn04">删除#bj节点</button></div>
				<div><button id="btn05">读取#city内的html代码</button></div>
				<div><button id="btn06">设置#bj内的html代码</button></div>
				<div><button id="btn07">创建一个"深圳"节点，添加到#city下2</button></div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	//详见https://www.runoob.com/htmldom/htmldom-tutorial.html
	// 创建单击响应函数
	function click(btnnum,fun){
		var btn = document.getElementById(btnnum);
		btn.onclick = fun;
	}
	// 创建一个"深圳"节点，添加到#city下
	click("btn01",function(){
		// 创建<li>深圳</li>
		// document.createElement(标签名)创建一个元素节点对象,将创建好的对象作为返回值
		var li = document.createElement("li");
		console.log(li);
		// document.createTextNode(文本内容)创建一个文本节点对象,并返回新的节点
		var text = document.createTextNode("深圳");
		console.log(text);
		// 将text设置为li的子节点
		// appendChild()向父结点中添加子节点
		li.appendChild(text);
		console.log(li);
		var city = document.getElementById("city");
		city.appendChild(li);
	})
	// 将"深圳"节点添加到#bj前面
	click("btn02",function(){
		var li = document.createElement("li");
		var text = document.createTextNode("深圳");
		li.appendChild(text);
		var bj = document.getElementById("bj");
		var city = document.getElementById("city");
		// 父节点.insertBefore(插入的子节点,插入位置的子节点)在指定的子节点前插入新的子节点
		city.insertBefore(li,bj);
	})
	// 使用"深圳"节点替换#bj节点
	click("btn03",function(){
		var li = document.createElement("li");
		var text = document.createTextNode("深圳");
		li.appendChild(text);
		var bj = document.getElementById("bj");
		var city = document.getElementById("city");
		// 父节点.replaceChild(新节点,旧节点)
		city.replaceChild(li,bj);
	})
	// 删除#bj节点
	click("btn04",function(){
		var bj = document.getElementById("bj");
		var city = document.getElementById("city");
		// 父节点.removeChild(删除的子节点)
		// city.removeChild(bj)
		// 如果不获取父节点
		bj.parentNode.removeChild(bj);
	})
	// 读取#city内的html代码
	click("btn05",function(){
		var city = document.getElementById("city");
		console.log(city);
		alert(city.innerHTML);
	})
	// 读取#bj内的html代码
	click("btn06",function(){
		var newword = prompt("请输入修改的内容")
		var bj = document.getElementById("bj");
		bj.innerHTML = newword; 
	})
	
	// 使用innerHTML也能完成增删改相关操作,但是会影响其他代码
	click("btn07",function(){
		var city = document.getElementById("city");
		// city.innerHTML += "<li>深圳</li>" 
		
		// 最佳方式
		var li = document.createElement("li");
		li.innerHTML = "深圳";
		city.appendChild(li);
	})
</script>

<style type="text/css">
	p{
		color: #333333;
		margin: 0.3125rem;
	}
	ul{
		list-style-type:none
	}
	li{
		color: #666666;
		background-color: #f2f2f2;
		border: 0.0625rem solid #d4d4d4;
		border-radius:0.3125rem ;
		float: left;
		margin: 0.3125rem;
		padding: 0.3125rem;
	}
	input{
		margin: 0.3125rem;
	}
	button{
		width: 18.75rem;
		margin: 0.3125rem;
		padding: 0.3125rem;
		color: #333333;
		border-radius:0.3125rem ;
		background-color: #f2f2f2;
		border:0.0625rem solid #d4d4d4;
	}
	#content{
		width: 62.5rem;
		margin:3.125rem auto;
	}
	#btnlist{
		float: left;
	}
	#formlist{
		float: left;
	}
	.inner{
		border: 0.0625rem solid #d4d4d4; 
		margin: 0.3125rem;
		border-radius: 0.625rem;
		width: 31.25rem;
	}
</style>